<template>
  <div class="logMsg">
    <!-- 搜索部分 -->
    <el-form :inline="true"  :model="search" ref="searchForm">
      <el-form-item label="Id:" prop="id">
        <el-input v-model="search.id" placeholder="请输入id" />
      </el-form-item>
      <el-form-item label="登录端" prop="type">
        <el-input v-model="search.type" placeholder="请输入登录端" />
      </el-form-item>
      <el-button
        @click="
          search.current = 1;
          getlog();
        "
        >搜索</el-button
      >
      <el-button @click="resetForm('searchForm')">重置</el-button>
    </el-form>
    <!-- 主题部分 -->
    <div>
      <el-table
        border
        ref="multipleTable"
        :data="Loglist"
        tooltip-ef
        style="width: 100%"
      >
        <el-table-column prop="create_time" label="登录时间"></el-table-column>
        <el-table-column prop="id" label="用户账号"></el-table-column>
        <el-table-column prop="userid" label="昵称"></el-table-column>
        <el-table-column prop="ip" label="地点"></el-table-column>
        <el-table-column prop="type" label="登录端"></el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination
.currentPage"
          :page-size="pagination
.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination
.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { GetLog } from "@/api/log";
export default {
  data() {
    return {
      // 登录日志列表
      Loglist: [],
      // 分页数据
      pagination
: {},
      // 搜索条件
      search: { size: 10, current: 1,  order:"desc" ,id: "",type:'' },
    };
  },
  created() {
    this.getlog();
  },
  methods: {
    resetForm(searchForm) {
      this.search.createEnd = "";
      this.$refs[searchForm].resetFields();
      this.getlog();
    },
    getlog() {
      var search = {};
      for (var k in this.search) {
        if (this.search[k]) {
          search[k] = this.search[k];
        }
      }
      GetLog(search).then((res) => {
        // 列表数据
        this.Loglist = res.data.data;
        // 分页数据
        this.pagination
 = res.data.pagination;
        // console.log(this.pagination);
        this.pagination
.currentPage = this.pagination
.currentPage * 1;
        this.pagination
.pageSize = this.pagination
.pageSize * 1;
      });
    },
    // 分页发生变化
    handleSizeChange(val) {
      this.search.size = val;
      this.getlog();
    },
    // 处理current变化
    handleCurrentChange(val) {
      // 当当前页发生变化时候更新 搜索条件的当前页
      // 获取数据
      this.search.current = val;
      this.getlog();
    },
  },
};
</script>